<!--<%  @ page language="java" pageEncoding="UTF-8"%>
<%  @taglib prefix="fs" uri="/fs-tags" %>-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--<%@ taglib prefix="s" uri="/struts-tags"%>-->
 
<HTML>
	<HEAD>
	
	<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
		<LINK rel=stylesheet type=text/css href="img/style.css">
		<LINK rel=stylesheet type=text/css href="img/style3.css">
		<script type="text/javascript" src="../com.atilax.frmwk/jquery-1.5.1.min.js00"></script>
		<script type="text/javascript" src="../com.atilax.frmwk/jquery-1.11.3.js"></script>
		<script type="text/javascript" src="jquery-1.11.3.js"></script>
		<script type="text/javascript" src="../js/check.js"></script>
		<script type="text/javascript" src="../js/checkAll.js"></script>
		<script type="text/javascript" src="weebox0.4/bgiframe.js"></script>
		<script type="text/javascript" src="weebox0.4/weebox.js"></script>
		<link type="text/css" rel="stylesheet" href="weebox0.4/weebox.css" />
		<script language="javascript" type="text/javascript" src="../com.atilax.frmwk/My97DatePicker/WdatePicker.js" ></script>
<script type="text/javascript" src="../com.atilax.frmwk/vue.js"></script>
<script type="text/javascript" src="vue.js"></script>
<!--ob8  css-->
<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
<style type="text/css">
body {
	background-color: #FFFFFF;
}
</style>
</link>

<!--// css end-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	
	<!-- pagging-->
  <link rel="stylesheet" type="text/css" href="easyui1.5/themes/default/easyui.css"> 
    <link rel="stylesheet" type="text/css" href="easyui1.5/themes/icon.css">
	
   <link rel="stylesheet" type="text/css" href="../com.atilax.frmwk/easyui1.5/themes/default/easyui.css">
     <link rel="stylesheet" type="text/css" href="../com.atilax.frmwk/easyui1.5/themes/icon.css">
    <script src="easyui1.5/jquery.easyui.min.js"></script>
	<script src="paggingCoreV3r44.js"></script>
	<script src="../com.atilax.frmwk/easyui1.5/jquery.easyui.min.js"></script>
    <script src="js/paggingUtil_easyui_vue.js"></script>
	
   <!-- pagging end--> 
   
      <script src="../api_cfg.js"></script>
	  
	  
	  <!--effect  -->
	    <link rel="stylesheet" type="text/css" href="../com.atilax.frmwk/jquery-ui-1.12.1.custom\jquery-ui.css">
 
	    <script src="../com.atilax.frmwk/jquery-ui-1.12.1.custom\jquery-ui.js"></script>
	 
	 
	   <script src="operlog.js"></script>
	  <style>
	  .searchbtn{  width:100px;height:30px;  }
    .toggler { width: 500px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
    .ui-effects-transfer { border: 2px dotted gray; }
  </style>
   
	</HEAD>
	<BODY>
	<div id="dbgdiv" style="display:none">dbg info::</div>
	<script>
	window.onerror =
			 function(errorMessage, scriptURI, lineNumber) {
			 var o={
			 message: errorMessage,
			 script: scriptURI,
			 line: lineNumber
			 };
			var s=JSON.stringify(o);
			 alert(s);
}
	
	</script>
    <!--action="background_administrator.aspx"-->
		<form name="myForm" method="post" action="operLog_list"
			 id="myForm"
			style="margin: 0px">
			<input type="hidden" name="pageFuncId" value="${param.pageFuncId }"/>
			<DIV class="column">
				<div class="form">
                <div class="l" onclick="toggleElementByDiv('demo1_table2');">
						<div class="r">
							<span>日志搜索</span>
						</div>
				  </div>
					
			  </div>
				<TABLE width="100%" border=0 align=center cellpadding="2"
					cellspacing="0">
					<TBODY>
						<TR class=summary-title>
							<TD height="30" align=left style="padding-left: 10px;">
							
							 
								操作人：
								
								<input name="operlog.loginname" type="text" maxlength="50"
									class="colorblur" onfocus="this.className='colorfocus';"
									onblur="this.className='colorblur';"  />
								操作内容：
								
								<input name="operlog.content" type="text" maxlength="50"
									class="colorblur" onfocus="this.className='colorfocus';"
									onblur="this.className='colorblur';"  />
								每页显示条数：
								
								<!--selected="selected" -->
								<select name="pageSize"
									id="pageSize">
									
									<option  value="3">
										3
											</option>
										<option  value="5">
										5
											</option>	
											
									<option   value="10">
										10
									</option>
									
									<option value="20">
										20
									</option>
									<option value="30">
										30
									</option>
									<option value="50">
										50
									</option>
									<option value="100">
										100
									</option>
									<option value="200">
										200
									</option>
									<option value="300">
										300
									</option>

								</select>
								
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								第几页：
								
								<input name="pageTextbox" type="text" maxlength="5" id="pageTextbox" 
									class="colorblur" onfocus="this.className='colorfocus';"
									onblur="this.className='colorblur';"  style="width:30px" />
									
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									总条数：
									<input name="totalcount" type="text" maxlength="5" id="totalcount" 
									class="colorblur" onfocus="this.className='colorfocus';"
									onblur="this.className='colorblur';"  style="width:39px" />
									
									
								<input type="button" name="Search" value="查询" id="Search" onclick="queryS36(query_aft_handler);"
									class="button searchbtn" style="MARGIN-BOTTOM: 0px;" />
									<script>
									//only qurey cur table data
									function queryS36(query_afterHandler){
									/**
									o={};
									o.loginname="bbb";
									r=JSON.stringify(o)
									r = "[{loginname:'aaa'}]"
									var ret_obj= JSON.parse(r); */
								/*
									 VueObj1.$data.list_data1=[{loginname:"aaa"}]
									return  ;
									*/
								//	runEffect()
									var p= $("form").serialize();
									 var para={"class":"com.attilax.oplog.OperLogAction","method":"list2","params": [""]};
	para=JSON.stringify(para);
	para=encodeURIComponent(para);
	api_url="";
	var url=api_url+"/restapi?t="+para+"&"+p;
	url="list.json";
  	url="http://localhost/list.json"
	logx(url);
	 $.get(url, function(result,status,xhr){
	 logx("url ret status "+status);
	 logx("urlresult"+result);
				var ret_obj= JSON.parse(result); 
				 VueObj1.$data.list_data1=ret_obj;//ret_obj.operlogList;
				 $("#totalcount").val(ret_obj.totalCount);
				// query_afterHandler();
  });
  
  }
									
									</script>
									
							</TD>
						</TR>
						
					</TBODY>
				</TABLE>
			</DIV>
</form>
			<DIV class="column">
            
            <div class="form">
						<div class="l">
							<div class="r">
								<span>操作日志列表</span>
								<input type="hidden" name="idsCheckVals" id="idsCheckVals" />
							</div>
						</div>
			  </div>
			 

			  <table  id="table1" cellspacing="1" cellpadding="1"
					Align="center" border="0" 
					style="width: 100%; word-break: break-all">
					<TR class="summary-title" style="HEIGHT: 25px" align="center">
						
						
						<TD width="10%">
							
						 操作人  <!--loginname-->

						</TD>
						<TD width="15%">
							
							 操作时间  <!--  " col="opertime"/>-->
						</TD>
						<TD width="50%">
							
						 操作内容       <!-- " col="content"/>-->
						</TD>
						<TD width="10%" style="display:none">
							
							 操作IP  <!-- " col="ip"/>-->
						</TD>
					</TR>
					
					<s:iterator value="operlogList" status="bean">
					<TR class="tdbg" onMouseOver="this.className='tdbg-dark';"  id="tr1"
						style="HEIGHT: 25px" onMouseOut="this.className='tdbg';"  v-for="dataItem in list_data1">
						
						<TD  align="left"     >
							{{dataItem.loginname}} 
						</TD>
						<TD  align="left"  >
                        
                        {{dataItem.opertimeStr}} 
							 
						</TD>
						<TD  align="left"  >
                          {{dataItem.content}} 
							 
						</TD>
						<TD  align="left"  style="display:none">
                          {{dataItem.ip}} 
							 
						</TD>
					</TR>
					 
					<TR class="tdbg" 
						style="HEIGHT: 25px" >
						<TD  align="center" colspan="10">

 
						</TD>
					</TR>
				</table>

			</DIV>
						<!-- 翻页控件区域-->

 
		<div style="margin-left:40px" class="easyui-pagination" id="page_div" ></div>
		
		<!-- 翻页控件区域  end-->
		
			<table width="95%" align="center">
				<tr>
					<td align="right">
						<table cellpadding="0" cellspacing="0" width="100%">
							<tr>
								<td align="left">
									<fs:operButtons />
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
            
            <script> 
			
			 
		  
//建立vue与表格的绑定关系，同时设置初始值为空[]
//el就是表格id
//list_data1是自定义的数据列表
var   VueObj1 =  new Vue({
          el: '#table1',
      	  data: {
            list_data1: []
          }
   });
 
   
   
   
   
   

   
   //ini page_controll    and per click  ini pagecontrol..
   //only for btn invoke  and ini page load event 
   //setj page contrill  invoke by qury btn click  event...
   function query_aft_handler()
   {
  
	
	
			//set paging control
			var totalrows_count =$("#totalcount").val();
			
			
			var pagesize =$("#pageSize").val();
			
			//set table event   ,,,onChangePageSize_handler
			 setPageControl(totalrows_count, pagesize, cur_page_datas_Handler,function(pageSize)
				{
				
				console.log("--pageSize pageSize chged:"+pageSize);
					$("#pageSize").val(pageSize);
					try{
					var opt="option[text='@t@']";
					opt=opt.reaplace("@t@",pageSize);
					 $("#pageSize").find(opt).attr("selected",true);
					 }catch(e){}
				});
			// $('#page_div').pagination('select', 1);//转到第一页
 
   
   }
   
   
      //page control  page chagne event after then query data .
   function cur_page_datas_Handler(pageNumber,pageSize_cur)
   {
   
   //set table data 
          $("#pageTextbox").val(  pageNumber);
		     $("#pageSize").val(  pageSize_cur);
			 //caue already pagecontrol settng.so qury aft..not need set nothing..
			queryS36(function(){
	
	
				//set paging control
			//	var totalrows_count =$("#totalcount").val();
				
				//set table event
			//	 setPageControl(totalrows_count, pagesize, cur_page_datas_Handler);
			});
		  
   }
   
   
   
   
   function main()
   {
   
    var pagesize=3;
	$("#pageSize").val(pagesize);
	$("#pageTextbox").val( 1);
	 $("#Search").click();
	//queryS36(query_aft_handler);
	
	
   }
  
     function runEffect() {
	 
	 function callback() {
      setTimeout(function() {
        $( "#Search" ).removeAttr( "style" ).hide().fadeIn();
      }, 1000 );
    }
	
      // get effect type from
      var selectedEffect = 'explode'
	  //$( "#effectTypes" ).val();
 
      // Most effect types need no options passed by default
      var options = {};
      // some effects have required parameters
      if ( selectedEffect === "scale" ) {
        options = { percent: 50 };
      } else if ( selectedEffect === "transfer" ) {
        options = { to: "#button", className: "ui-effects-transfer" };
      } else if ( selectedEffect === "size" ) {
        options = { to: { width: 200, height: 60 } };
      }
 
   
      // Run the effect
      $( "#Search" ).effect( selectedEffect, options, 500, callback );
    }
   
   /*
   function xx()
   {
   //获取数据，一般是从ajax从后端获取数据
  // var  list_data2=[{loginname:"王一",content:"管理员"},{loginname:"王二",content:"普通用户"}];
    var para={"class":"com.attilax.oplog.OperLogAction","method":"list2","params": [""]};
	para=JSON.stringify(para);
	para=encodeURIComponent(para);
	 $.get("http://localhost:8081/restapi?t="+para, function(result){
				var ret_obj= JSON.parse(result); 
				 VueObj1.$data.list_data1=ret_obj.operlogList;
				 
				 setPageControl(ret_obj.totalCount, 3, cur_page_datas_Handler, );
  });
	
  	//将数据绑定到table控件 
   // VueObj1.$data.list_data1=list_data2;
   
   }
   
   */
main();
//$("#pageSize").val(30);



</script>

<script>
logx("----fin")
</script>
	</BODY>
</HTML>

